<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{
                    item.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.attractionCategory" placeholder="景点类别" class="handle-select mr10">
                    <el-option key="0" label="全部景点" value="0"></el-option>
                    <el-option key="1" label="AA景区" value="1"></el-option>
                    <el-option key="2" label="AAA景区" value="2"></el-option>
                    <el-option key="3" label="AAAA景区" value="3"></el-option>
                    <el-option key="4" label="AAAAA景区" value="4"></el-option>
                </el-select>
                <el-input v-model="query.attractionName" placeholder="景区名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="ID" width="65" align="center">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="userImgUrl" label="用户头像"></el-table-column> -->
                <el-table-column prop="attractionName" label="景点名称" width="80"></el-table-column>
                <el-table-column label="景点类别" width="100" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.attractionCategory == '0'
                            ? 'danger'
                            : scope.row.attractionCategory == '1'
                                ? 'success'
                                : scope.row.attractionCategory == '2'
                                    ? 'success'
                                    : scope.row.attractionCategory == '3'
                                        ? 'success'
                                        : scope.row.attractionCategory == '4'
                                            ? 'success'
                                            : 'warning'
                            ">
                            {{
                                scope.row.attractionCategory == '0'
                                ? '暂无'
                                : scope.row.attractionCategory == '1'
                                    ? 'AA景区'
                                    : scope.row.attractionCategory == '2'
                                        ? 'AAA景区'
                                        : scope.row.attractionCategory == '3'
                                            ? 'AAAA景区'
                                            : 'AAAAA景区'
                            }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="attractionDesc" label="景点简介"></el-table-column>
                <el-table-column prop="attractionContent" label="景点内容" type="email"></el-table-column>
                <!-- <el-table-column prop="attractionImage" label="景点预览图"></el-table-column> -->
                <el-table-column label="景点图片" width="180">
                    <template #default="scope">
                        <el-image :src="scope.row.attractionImage"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-popconfirm title="确定要删除此景点" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="handleDelete(scope.$index, scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination v-if="totalCount" v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize"
                    layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-dialog v-model="centerDialogVisible" title="景点编辑" width="40%">
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
                    <el-form-item label="景点名称" prop="attractionName">
                        <el-input v-model="ruleForm.attractionName" />
                    </el-form-item>
                    <el-form-item label="景点描述" prop="attractionDesc">
                        <el-input v-model="ruleForm.attractionDesc" />
                    </el-form-item>
                    <el-form-item label="景点简介" prop="attractionContent">
                        <el-input v-model="ruleForm.attractionContent" />
                    </el-form-item>
                    <!-- <el-form-item label="景点图" prop="attractionImage">
                        <el-input v-model="ruleForm.attractionImage" />
                    </el-form-item> -->
                    <el-form-item label="景点图片:" prop="avator" label-width="100">
                        <el-upload action="#" :multiple="false" accept=".jpg,.jpeg,.png,.svg" :limit="1"
                            :show-file-list="true" list-type="picture-card" @change="handelFileChange">
                            <el-image class="avatar" v-if="imageUrl" :src="imageUrl" />
                            <el-icon v-else>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="景点类别" prop="attractionCategory">
                        <el-radio-group v-model="ruleForm.attractionCategory">
                            <el-radio label="0">暂无</el-radio>
                            <el-radio label="1">AA景区</el-radio>
                            <el-radio label="2">AAA景区</el-radio>
                            <el-radio label="3">AAAA景区</el-radio>
                            <el-radio label="4">AAAAA景区</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">更新</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
export default {
    setup() {
        let breadList = [] // 路由集合
        const route = useRoute()
        const getBreadcrumb = (url) => {
            let matched = url.matched;
            //如果不是首页
            if ("Home" == matched[0].name) {
                matched[0].meta = { title: "系统首页" }
            }
            breadList = matched;
        }
        watch(route, (newValue, oldValue) => {
            // console.log(222222,newValue)
            getBreadcrumb(newValue)
        }, { deep: true, immediate: true });

        const resetForm = (formEl) => {
            if (!formEl) return;
            formEl.resetFields();
        };
        const submitForm = async (formEl) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    // console.log("提交更新", fields);
                    request
                        .request({
                            url: "/attraction/updateAttraction",
                            method: "post",
                            data: {
                                attractionId: ruleForm.attractionId,
                                attractionName: ruleForm.attractionName,
                                attractionDesc: ruleForm.attractionDesc,
                                attractionCategory: ruleForm.attractionCategory,
                                attractionContent: ruleForm.attractionContent,
                                attractionImage: ruleForm.attractionImage
                            },
                        })
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElNotification({
                                    title: "更新成功",
                                    message: "成功更新用户信息",
                                });
                                getData();
                                centerDialogVisible.value = false
                            } else {
                                ElNotification({
                                    title: "更新失败",
                                    message: "请联系管理员检查失败原因",
                                });
                            }
                        })
                        .catch((e) => {
                            ElNotification({
                                title: "更新失败",
                                message: "请联系管理员检查失败原因",
                            });
                        });
                } else {
                    ElNotification({
                        title: "校验失败",
                        message: "请重新填写信息",
                    });
                }
            });
        };
        const ruleForm = reactive({
            attractionId: "",
            attractionName: "",
            attractionDesc: "",
            attractionCategory: 0,
            attractionContent: "",
            attractionImage: ""
        });
        const rules = reactive({
            username: [
                {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                },
            ],
            password: [
                {
                    required: true,
                    message: "请输入密码",
                    trigger: "blur",
                },
                {
                    min: 1,
                    max: 7,
                    message: "长度大于1小于7",
                    trigger: "blur",
                },
            ],
            phone: [
                {
                    required: true,
                    message: "请输入电话号码",
                    trigger: "blur",
                },
            ],
            address: [
                {
                    required: false,
                    message: "请输入地址",
                    trigger: "blur",
                },
            ],
            type: [
                {
                    required: true,
                    message: "请选择用户类型",
                    trigger: "change",
                },
            ],
            status: [
                {
                    required: true,
                    message: "请选择用户状态",
                    trigger: "change",
                },
            ],
        });
        const ruleFormRef = ref();
        const centerDialogVisible = ref(false);
        const query = reactive({
            attractionName: "",
            currentPage: 1,
            pageSize: 5,
        });
        const tableData = ref([]);
        const totalCount = ref(0);
        // 获取表格数据
        const getData = () => {
            request
                .request({
                    url: "/attraction/getAllAttraction",
                    params: {
                        attractionName: query.attractionName,
                        currentPage: query.currentPage,
                        pageSize: query.pageSize,
                    },
                    method: "get",
                })
                .then((res) => {
                    //获取当前页的数据
                    tableData.value = res.data.data.rows;
                    //获取总记录数
                    totalCount.value = res.data.data.count;
                    console.log(res.data.data);
                })
                .catch((e) => {
                    console.log(e);
                });
        };
        getData();
        // 查询操作
        const handleSearch = () => {
            getData();
        };
        // 分页导航
        const handleCurrentChange = (val) => {
            query.currentPage = val;
            getData();
            // console.log(val);
        };
        // 删除操作
        const handleDelete = (index, row) => {
            request
                .request({
                    url: "/attraction/delete",
                    method: "get",
                    params: {
                        attractionId: row.attractionId,
                    },
                })
                .then((res) => {
                    if (res.data.msg == "success") {
                        getData();
                        ElNotification({
                            title: "删除成功",
                            message: "成功删除景点信息",
                        });
                    } else {
                        ElNotification({
                            title: "删除失败",
                            message: "请联系管理员检查失败原因",
                        });
                    }
                })
                .catch((e) => {
                    ElNotification({
                        title: "删除失败",
                        message: "请联系管理员检查失败原因",
                    });
                });
        };
        // 获取文件数据
        const imageUrl = ref('')
        const selectedFile = ref()
        const handelFileChange = (file) => {
            selectedFile.value = file.raw
            imageUrl.value = URL.createObjectURL(file.raw)
            console.log(selectedFile.value, '555')
        }
        const handleEdit = (index, row) => {
            centerDialogVisible.value = true;
            ruleForm.attractionId = row.attractionId;
            ruleForm.attractionName = row.attractionName;
            ruleForm.attractionDesc = row.attractionDesc;
            ruleForm.attractionCategory = Number(row.attractionCategory);
            ruleForm.attractionContent = row.attractionContent;
            ruleForm.attractionImage = row.attractionImage;
        };
        return {
            breadList,
            resetForm,
            ruleFormRef,
            submitForm,
            ruleForm,
            rules,
            centerDialogVisible,
            query,
            totalCount,
            tableData,
            getData,
            handleEdit,
            handleSearch,
            handleCurrentChange,
            handleDelete,
            handelFileChange
        };
    },
};
</script>
<style lang="scss" scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
  